<template>
  <div>
    <navSearch :show-before="false" :formList="formList" @btnSearch="btnSearch" ref="restForm">
      </navSearch>

    <div class="statistical">
      <span class="total">类别数量：{{classNum}}</span>
      <span class="total">子类别总数：{{childClassNum}}</span>
      <el-button class="addBtn" type="primary" plain  @click="add">新增</el-button>
    </div>

    <!-- content -->
     <el-table
      :data="tableData"
      style="width: 100%"
      >
      <el-table-column
        prop="goodsClass"
        label="类别名称"
        width="300">
      </el-table-column>
      <el-table-column
        prop="goodsSort"
        label="排序"
        width="300">
      </el-table-column>
      <el-table-column
        prop="childClassAmount"
        label="子类别数量"
        width="300">
      </el-table-column>
      <el-table-column
        prop="operation"
        label="操作">
      <template slot-scope="{row}">
        <el-link type="primary" @click="edit(row.id)">编辑</el-link>
        <el-link type="success" @click="$router.push('./childClass')">子类别管理</el-link>
        <el-link type="danger" @click="del(row.id)">删除</el-link>
       </template>
      </el-table-column>
     </el-table>

   <!-- 编辑弹框 -->
    <el-dialog
      title="编辑类别"
      :visible="editDialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form  :model="editForm" label-width="80px">
        <el-form-item label="类别名称">
          <el-input v-model="editForm.goodsClass"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="editForm.goodsSort"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="btnOK">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="新增类别"
      :visible.sync="addDialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form ref="editForm" :model="editForm" >
        <el-form-item label="类别名称">
          <el-input v-model="editForm.goodsClass"></el-input>
        </el-form-item>
          <el-form-item label="排序">
          <el-input v-model="editForm.goodsSort"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getGoodsClassList, editGoodsClassList, addGoodsClassList, delGoodsClassList } from '@/api/storeManage'
export default {
  created () {
    this.getGoodsClassList()
  },
  data () {
    return {
      classNum:0,
      childClassNum:0,
      editDialogVisible: false,
      addDialogVisible: false,
      tableData: [],
      // [{
      //   goodsClass: '3283928081',
      //   goodsSort: '美宜佳-保利店',
      //   childClassAmount: '便利百货',
      //   operation: 300
      // }],
      formList: {
        goodsTypeI: true
      },
      editForm: {
        goodsClass: '',
        goodsSort: '',
        childClassAmount: '',
        operation: ''
      }
    }
  },
  methods: {
    
    
    // 渲染数据
    async getGoodsClassList () {
      this.tableData = await getGoodsClassList()
      console.log(this.tableData);

      // 计算统计
      this.classNum=this.tableData.length
      this.childClassNum=this.totalCom("childClassAmount")
    },
     totalCom (pro) {
      var sum=0
      this.tableData.forEach(item => {
        item[pro]=Number(item[pro])
        return sum += item[pro]; 
      })
      return sum
    },

    // 删除
    async del (id) {
      try {
        await this.$confirm('确认删除该分类吗？')
        // 只有点击了确定才能进入到下一步
        await delGoodsClassList(id)
        this.getGoodsClassList()
        this.$message.success('删除分类成功')
      } catch (error) {
        console.log(error)
      }
    },

    // 编辑
    edit (id) {
      this.editDialogVisible = true
      this.editForm = this.tableData.filter(item => item.id === id)[0]
      // console.log(this.editForm)
    },
    // 新增
    add () {
      this.editDialogVisible = true
    },
    // 点击确定编辑/新增
    async btnOK () {
      try {
        if (this.editForm.id) {
          await editGoodsClassList(this.editForm)
        } else {
          console.log('无id，新增')
          await addGoodsClassList(this.editForm)
          this.editForm = ''
        }
        // 重新拉取数据
        this.$message.success('操作成功')
        this.editDialogVisible = false
        this.getGoodsClassList()
      } catch (error) {
        console.log(error)
      }
    },
    btnSearch (formData) {
      const { goodsTypeI } = formData
      if (goodsTypeI) {
        const arr = this.tableData.filter(item => item.goodsClass === goodsTypeI || goodsTypeI === '')
        this.tableData = arr
        this.$refs.resetForm.btnReset()
      } else {
        this.getGoodsList()
      }
    },

  }
}
</script>

<style>
.statistical{
  line-height: 60px;
  padding: auto 20px;
}
.total{
  margin: 20px 80px;
}
  .addBtn{
    float: left;
    margin: 10px 0px;

  }
.el-link{
  margin: auto 4px;
}
.cell{
  text-align: center;
}
</style>
